<template>
	<view class="calendar">
		<view class="header flex flex_justify_between">
			<view class="jiantou" @click="onSwitchPrevMonth()">
				<image src="@/static/sign/left.png"></image>
			</view>
			<view class="current-date" v-if="dayList.length > 0">{{ currentDate }}</view>
			<!-- <view class="btn-group">
        <view class="btn btn-prev" >上个月</view>
        <view class="btn btn-next" >下个月</view>
      </view> -->
			<view class="jiantou" @click="onSwitchNextMonth()">
				<image src="@/static/sign/right.png"></image>
			</view>
		</view>
		<view class="body">
			<view class="weeks">
				<view class="week-item" v-for="week in weeks" :key="week">{{ week }}
				</view>
			</view>
			<view class="day-list" v-if="dayList.length > 0">
				<!-- 日期的点击事件   @click="handleClick(day)" -->
				<view :class="{
            'day-item': true,
            today: day.isToday && day.signType != 1,
            checked: day.checked,
            'current-month-day': day.type === 'current'
          }" v-for="(day, index) in dayList" :key="index">
					<view class="jifen" style="width: 100%;" v-if="day.isToday != null || day.isToday != undefined">
						<image src="@/static/sign/jfbg.png"></image>
						<text class="jfts">{{Math.floor(Math.random()*50)}}</text>
					</view>
					<view class="text">
						<view v-if="day.signType == 1">
							<view class="signTypeIcon">
								<image src="@/static/sign/success.png"></image>
								<view class="signTypeFont" style="color: #FD2628;">
									{{day.day}}
								</view>
							</view>
						</view>
						<view v-else-if="day.signType == 2">
							<view class="signTypeIcon">
								<image src="@/static/sign/failed.png"></image>
								<view class="signTypeFont" style="color: #99989D;">
									{{day.day}}
								</view>
							</view>
						</view>
						<view v-else>{{day.day}}</view>
						<!-- {{ day.checked ? '√' :  day.day}} -->
					</view>
				</view>
				<view style="height: 20rpx;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			checks: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				year: null,
				month: null,
				day: null,
				dayList: [], //组件渲染的数组
				monthList: [], //通过后端获取的数组
				weeks: ['日', '一', '二', '三', '四', '五', '六']
			}
		},
		computed: {
			currentDate() { // 用来为标题的日期补零
				const year = this.year
				const month = this.month < 10 ? '0' + this.month : this.month
				return `${year}-${month}`
			}
		},
		watch: {
			checks() {
				this.initDate()
			},
		},
		created() {
			const {
				year,
				month,
				day
			} = this.getCurrentDate()
			this.initDate(year, month, day)
		},
		methods: {
		    initDate(year = this.year, month = this.month, day = this.day) {
		      const dayList = this.getDayList(year, month)
		
		      this.year = year
		      this.month = month
		      this.day = day
		      this.dayList = dayList
		    },
		    handleClick(day) {
		      const payload = {
		        year: this.year,
		        month: this.month,
		        ...day
		      }
		
		      switch (day.type) {
		        case 'prev':
		          this.onSwitchPrevMonth(day)
		          break
		        case 'next':
		          this.onSwitchNextMonth(day)
		          break
		        default:
		          this.$emit('current-month-day', payload)
		      }
		    },
		    onSwitchPrevMonth(day) {
		      const { prevYear, prevMonth } = this.getPrevMonthInfo(
		        this.year,
		        this.month
		      )
		      const payload = {
		        year: prevYear,
		        month: prevMonth,
		        oldYear: this.year,
		        oldMonth: this.month,
		        ...day
		      }
		
		      this.initDate(prevYear, prevMonth)
		      this.$emit('prev-month-day', payload)
		    },
		    onSwitchNextMonth(day) { //下一月
		      const { nextYear, nextMonth } = this.getNextMonthInfo(
		        this.year,
		        this.month
		      )
		      const payload = {
		        year: nextYear,
		        month: nextMonth,
		        oldYear: this.year,
		        oldMonth: this.month,
		        ...day
		      }
		
		      this.initDate(nextYear, nextMonth)
		      this.$emit('next-month-day', payload)
		    },
		    getPrevMonthInfo(year, month) {
		      let prevYear = year
		      let prevMonth = month - 1
		
		      if (prevMonth < 1) {
		        prevMonth = 12
		        prevYear -= 1
		      }
		
		      return {
		        prevYear,
		        prevMonth
		      }
		    },
		    getNextMonthInfo(year, month) {
		      let nextYear = year
		      let nextMonth = month + 1
		
		      if (nextMonth > 12) {
		        nextMonth = 1
		        nextYear += 1
		      }
		
		      return {
		        nextYear,
		        nextMonth
		      }
		    },
		    getDayList(year, month) {
		      const prevMonthDays = this.getPrevMonthDays(year, month)
		      const currentMonthDays = this.getCurrentMonthDays(year, month)
		      const nextMonthDays = this.getNextMonthDays(year, month)
		
		      return [...prevMonthDays, ...currentMonthDays, ...nextMonthDays]
		    },
		    getCurrentDate() { // 获取当前年月日
		      const date = new Date()
		      const year = date.getFullYear()
		      const month = date.getMonth() + 1
		      const day = date.getDate()
		
		      return {
		        year,
		        month,
		        day
		      }
		    },
		    getMonthLastDay(year, month) {   // 获取本月最后一天
		      const { nextYear, nextMonth } = this.getNextMonthInfo(year, month) // 获取下个月信息
		      const date = new Date(`${nextYear}/${nextMonth}/1`)
		      const firstDayTimeStamp = date.getTime()
		      const oneDayTimeStamp = 24 * 60 * 60 * 1000
		      const prevMonthLastDay = new Date(
		        firstDayTimeStamp - oneDayTimeStamp
		      ).getDate()
		
		      return prevMonthLastDay
		    },
		    getPrevMonthDays(year, month) { //获取上个月天数
		      const { prevYear, prevMonth } = this.getPrevMonthInfo(year, month)
		      const prevMonthLastDay = this.getMonthLastDay(prevYear, prevMonth)
		      const date = new Date(`${year}/${month}/1`)
		      const week = date.getDay()
		
		      const days = []
		
		      for (let i = 0; i < week; i++) {
		        days.unshift({
		          type: 'prev',
		          checked: false,
		          day: prevMonthLastDay - i
		        })
		      }
		
		      return days
		    },
		    getCurrentMonthDays(year, month) { //获取当前月份天数的方法
		      const currentMonthLastDay = this.getMonthLastDay(year, month)
		      const checks = this.checks
		      const days = []
		      const {
		        year: currentYear,
		        month: currentMonth,
		        day: currentDay
		      } = this.getCurrentDate()
		
		      for (let i = 1; i <= currentMonthLastDay; i++) {
		        let checked = false
		        let isToday =
		          currentYear === year && currentMonth === month && currentDay === i
		
		        checks.forEach(date => {
		          const dateArr = date.split('-')
		
		          if (year == dateArr[0] && month == dateArr[1] && i == dateArr[2]) {
		            checked = true
		          }
		        })
		
		        days.push({
		          type: 'current',
		          checked,
		          isToday,
		          day: i
		        })
		      }
		      return days
		    },
		    getNextMonthDays(year, month) {
		      const currentMonthLastDay = this.getMonthLastDay(year, month)
		      const date = new Date(`${year}/${month}/${currentMonthLastDay}`)
		      const week = date.getDay()
		      const days = []
		
		      let day = 0
		
		      for (let i = week + 1; i <= 6; i++) {
		        day++
		
		        days.push({
		          type: 'next',
		          checked: false,
		          day
		        })
		      }
		
		      return days
		    }
		  }
		}
</script>

<style lang="scss" scoped>
	.calendar {
		width: 100%;
		background-color: #fff;
		color: $uni-text-color;
		display: inline-block;

		.jiantou {
			image {
				width: 18rpx;
				height: 20rpx;
			}
		}

		.header {
			padding: 0 24upx;
			/* display: flex;
    justify-content: space-between; */
			border-bottom: 2upx solid #eee;

			.current-date {
				text-align: center;
				font-size: 34upx;
				padding: 32upx 0;
				color: #030303;
			}

			.btn-group {
				display: flex;
				align-items: center;

				.btn {
					line-height: 1;
					background: #fff;
					border: 1px solid #dcdfe6;
					color: #606266;
					text-align: center;
					box-sizing: border-box;
					font-weight: 500;
					padding: 12upx 20upx;
					font-size: 24upx;

					&.btn-prev {
						border-radius: 2px 0 0 2px;
						border-right: 0;
					}

					&.btn-next {
						border-radius: 0 2px 2px 0;
					}
				}
			}
		}

		.body {
			.weeks {
				display: flex;
				font-size: 30upx;
				padding: 32upx 0;

				.week-item {
					flex: 1;
					text-align: center;
				}
			}

			.day-list {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 20rpx;

				.jifen {
					color: #ffffff;
					/* background-image: url(../../static/home/sign/jfbg.png);
					background-size:100% 100%;
					background-repeat:no-repeat; */
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						position: relative;
						width: 70rpx;
						height: 66rpx;
					}

					.jfts {
						margin-top: -8rpx;
						position: absolute;
						font-size: 22rpx;
					}
				}
				.signTypeIcon{
					position: relative;
					image{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						z-index: 999;
						top: 50% !important;
						left: 50% !important;
						transform: translate(-50%,-50%) !important;
					}
					.signTypeFont{

					}
				}

				.day-item {
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					flex-direction: row-reverse;
					width: 14.285%;
					text-align: center;
					padding: 10upx 0;
					font-size: 32upx;
					color: #c8c8c8;
					margin: auto;

					&.current-month-day {
						color: #595959;
					}

					&.checked,
					&.today {

						// padding: 26upx 0;
						.text {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 50upx;
							height: 50upx;
							border-radius: 100%;
							box-sizing: border-box;
							background-color: #fe5d20;
							opacity: 0.8;
							color: #fff;
							font-size: 28upx;
							padding: 20upx 0;

						}
					}
				}
			}
		}
	}
</style>
